<template>
<div>
  <el-menu
      style="margin-right: 100px"
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      active-text-color="green"
      @select="handleSelect"
  >
    <el-menu-item index="1"  @click="area='';searchRank()">全部</el-menu-item>
    <el-menu-item  index="2" @click="area='内地';searchRank()">内地</el-menu-item>
    <el-menu-item index="3" @click="area='欧美';searchRank()">欧美</el-menu-item>
    <el-menu-item index="4" @click="area='日本';searchRank()">日本</el-menu-item>
    <el-menu-item  index="5" @click="area='韩国';searchRank()">韩国</el-menu-item>
  </el-menu>
  <div class="list">
  <div class="videorankList" v-for="(item,index) in videoRankList" :key="item">
         <div style="width: 20px;"><strong style="font-size: 20px">{{index+1}}</strong></div>
         <img :src="item.cover" height=100 style="margin-left: 20px" @click="playMV(item.id)">
          <play-circle-filled  class="i" @click="playMV(item.id)"/>
        <div style="margin-left: 20px">
          <p @click="search1(item.name)">{{item.name}}</p>
          <p @click="search1(item.artistName)">{{item.artistName}}</p>
          <p>播放量:{{item.playCount }}</p>
        </div>
  </div>
</div>
</div>
</template>

<script setup>
import {ref} from "vue"
import axios from "axios";
import {useRouter} from "vue-router";
import {useMVStore,useSongsStore} from "@/Store/Pinia/pinia";
import {baseURL} from "@/request/index.js";
const mvstore=useMVStore();
const songsStore=useSongsStore();
const router=useRouter();

const activeIndex = ref("1")
const videoRankList=ref([]);
const area=ref('')
const mvurl=ref("")


const getVideo=()=>{
  axios.post(baseURL+"/top/mv?limit=20").then((res)=>{
    console.log(res);
    videoRankList.value=res.data.data;
  })
}
getVideo();
function searchRank(){
  axios.post(baseURL+"/top/mv?limit=30&area="+area.value).then((res)=>{
    console.log(res);
    videoRankList.value=res.data.data;
  })
}
function playMV(mvid){
  axios.post(baseURL+"/mv/url?id=" + mvid).then((res) => { //获取MV地址
    mvurl.value = res.data.data.url;
  }).then(()=>{
    mvstore.$patch((state)=>{
      state.mvid=mvid;
    })
    router.push({name:'songsMV',params:{mvurl:mvurl.value}})
  })
}
function search1(value){
  songsStore.search(value);
  songsStore.show=1;
  router.push({path:'/homePage/searchList/1'})
}
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>

<style scoped>
.videorankList{
  width: 100%;
  height: 120px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  transition:All 0.4s ease-in-out;
  position: relative;
}
.videorankList:hover{
  /*transform:translate(0,-20px);*/
}

.videorankList .i{
  color: white;
  position: absolute;
  left: 110px;
  top:40px;
  opacity:0;
  font-size: 40px;
  transition-duration: 1s;
  transition-timing-function: ease;
  transition-delay: 0s;
  transition-property: opacity;
  -webkit-animation-name: xing;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-duration: 2s;
}
.videorankList .i:hover{
  opacity: 1;
}
.list{
  width: 100%;
  height: 400px;
  overflow-y:scroll;
  overflow-x:hidden;
}
.videorankList div p:hover{
  cursor: pointer;
  color: #42b983;
}
</style>